<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header>简道乐管理系统</el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          default-active="2"
          background-color="#d3dce6"
          text-color="#333"
          active-text-color="#f00"
        >
          <el-menu-item index="1">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-help"></i>
            <span slot="title">行政区划</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">人情世故</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 内容区 -->
      <el-container>
        <el-main>
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>行政区划</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 表单 -->
          <el-form :inline="true" style="margin-top: 20px">
            <el-row>
              <el-col :span="10">
                <el-form-item label="省市区县：">
                  <el-input
                    placeholder="请输入省市区县"
                    style="width: 320px"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-search"
                    >查询</el-button
                  >
                </el-button-group>
              </el-col>
            </el-row>
          </el-form>

          <!-- 省 -->
          <div id="china_map" style="width: 40%; float: left">
            <div id="china_map" ref="china_map"></div>
          </div>
          <!-- 市 -->
          <div id="province_map" style="width: 40%; float: left">
            <div id="province_map" ref="province_map"></div>
          </div>
          <!-- 列表 -->
          <div id="mapTable" style="width: 20%; float: left">
            <div id="table_map" ref="table_map">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="省/市"> </el-table-column>
                <el-table-column prop="value" label="统计"> </el-table-column>
              </el-table>
            </div>
          </div>
        </el-main>
        <!-- 底部 -->
        <el-footer>©2024 简道乐 版权所有</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
// import chinaData from "@/assets/map/china.json";
import pinyin from "pinyin";

export default {
  name: "Region",
  data() {
    return {
      chinaData: null,
      provinceName: "shanghai",
      provinceData: null,
      tableData: [
        {
          name: "北京",
          value: "☆首都，政治中心",
        },
        {
          name: "上海",
          value: "金融中心",
        },
      ],
    };
  },
  mounted() {
    this.showProvinceGeo();
    this.clickGoNext();
    this.showCityGeo(this.provinceName);
  },
  methods: {
    /*
      geo:地理坐标系组件( https://echarts.apache.org/zh/option.html#geo)
      地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图
    */
    showProvinceGeo() {
      this.chinaData = this.$echarts.init(this.$refs.china_map);

      this.$echarts.registerMap(
        "province",
        require("echarts/map/json/china.json")
      ); //使用 require 引入地图组件，而不是在开头的 import

      this.option = {
        geo: {
          show: true, //是否显示
          type: "map", //类型是地图
          map: "province", //中国地图
          label: {
            //设置字体样式
            show: true, //字体是否显示
            fontSize: 14, //设置字体大小
            color: "blue", //设置字体颜色
          },
          itemStyle: {
            //设置图形样式
            areaColor: "#ccc", //地图颜色
            borderWidth: 1, //地图边框宽度
            borderColor: "#b8c16f", //地图边框颜色
          },
          zoom: 1.2, //地图放大到原来的多少倍
          emphasis: {
            //高亮状态（鼠标放在哪里，哪里发生变化）
            label: {
              //字体设置
              show: true, //显示字体
              color: "#fff", //字体颜色
              fontSize: 14, //字体大小
            },
            itemStyle: {
              //设置图像样式
              areaColor: "#03eefe", //设置地图背景颜色
              borderColor: "green", //设置边框颜色
              borderWidth: 1, //边框宽度
            },
          },
        },
        series: [
          //设置特效的
          {
            name: "带有特效动画的散点图",
            type: "scatter", //带有特效动画的散点图
            coordinateSystem: "geo", //该系列使用的坐标系
            rippleEffect: {
              //特效相关配置
              period: 2,
              brushType: "stroke",
              scale: 1, //这个是设置类似于雷达波纹的大小的
            },
            label: {
              //标签
              normal: {
                //正常（默认）标签设置
                show: true, //标签显示
                position: "right", //标签显示在右侧
                formatter: "{b}",
              },
            },
            itemStyle: {
              color: "#fc5531", //圆点的颜色
            },
            Symbol: "circle", //特效是圆
            // symbolSize:10,  //设置圆点的大小
            symbolSize: function (value) {
              return value[2];
            },
            data: [
              //数据
              {
                name: "北京",
                value: [116.4551, 40.2539, 20, "#fc5531"],
              },
              {
                name: "长沙",
                value: [113.0823, 28.2568, 10, "#b34b62"],
              },
            ],
          },
        ],
      };

      this.chinaData.setOption(this.option);
    },

    showCityGeo(provinceName) {
      this.provinceData = this.$echarts.init(this.$refs.province_map);
      this.$echarts.registerMap(
        "city",
        require(`echarts/map/json/province/${provinceName}.json`)
      );
      this.option = {
        geo: {
          type: "map",
          map: "city",
          zoom: 1.2,
          label: {
            normal: {
              color: "#000",
              show: true,
            },
          },
        },
      };
      this.provinceData.setOption(this.option);
    },

    /*
      鼠标事件： https://echarts.apache.org/zh/api.html#echartsInstance.on
      echarts.getMap() :https://echarts.apache.org/zh/api.html#echarts.getMap
      注意：只有用echarts的地图，才能使用  echarts.getMap("china").geoJson.features
    */
    clickGoNext() {
      var that = this;
      var dataList = that.$echarts.getMap("province").geoJson.features;
      const pinyinOptions = { style: pinyin.STYLE_NORMAL };
      this.chinaData.on("click", function (res) {
        dataList.forEach((element) => {
          if (element.properties.name == res.name) {
            let convertedPinyin = pinyin(res.name, pinyinOptions)
              .map((s) => s.join(""))
              .join("");
            if (res.name == "陕西") {
              convertedPinyin += "1";
            }
            if (res.name == "西藏") {
              convertedPinyin = "xizang";
            }
            console.log(res.name, convertedPinyin);
            that.showCityGeo(convertedPinyin);
          }
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  line-height: 60px;
}

.el-header {
  text-align: left;
}

.el-footer {
  text-align: center;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f3f3f5;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

#china_map,
#province_map,
#table_map {
  width: 100%;
  height: 600px;
  background-color: #f1f3f4;
}
</style>
